<template>
  <div class="industryGraph">
    <div class="content-container">
      <div class="industryGraphCharts" ref="chartRef"></div>
      <div class="sidebar">
        <div class="detail-card" v-if="selectedNode">
          <h3>{{ selectedNode.name }} 详情</h3>
          <div class="detail-item">
            <span class="label">企业数量:</span>
            <span class="value">{{ selectedNode.detail.enterprises }}家</span>
          </div>
          <div class="detail-item">
            <span class="label">企业规模:</span>
            <span class="value">{{ selectedNode.detail.scale }}</span>
          </div>
          <div class="detail-item">
            <span class="label">节点覆盖度:</span>
            <span class="value">{{ selectedNode.detail.coverage }}</span>
          </div>
          <div class="detail-item">
            <div class="related-links">
              <div class="upstream">
                <h4>上游关联环节</h4>
                <p>{{ getUpstreamLinks(selectedNode.name) }}</p>
              </div>
              <div class="downstream">
                <h4>下游关联环节</h4>
                <p>{{ getDownstreamLinks(selectedNode.name) }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 产业链完备度展示 -->
        <div class="completeness-card">
          <h3>产业链完备度</h3>
          <div class="completeness-item" v-for="item in completenessData" :key="item.dimension">
            <div class="completeness-label">{{ item.dimension }}</div>
            <div class="completeness-content">{{ item.content }}</div>
            <div class="completeness-value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLDivElement | null>(null)
let chartInstance: echarts.ECharts | null = null
const selectedNode = ref<any>(null)

// 重庆智能网联新能源汽车产业链数据
const industryData = {
  nodes: [
    // 上游节点
    { name: '锂矿资源', itemStyle: { color: '#1f77b4' }, detail: { enterprises: 12, scale: '大型', coverage: '85%' } },
    { name: '正负极材料', itemStyle: { color: '#1f77b4' }, detail: { enterprises: 28, scale: '中大型', coverage: '92%' } },
    { name: '电解液', itemStyle: { color: '#1f77b4' }, detail: { enterprises: 18, scale: '中型', coverage: '78%' } },
    { name: '隔膜', itemStyle: { color: '#1f77b4' }, detail: { enterprises: 15, scale: '中小型', coverage: '70%' } },

    // 中游节点
    { name: '动力电池', itemStyle: { color: '#2ca02c' }, detail: { enterprises: 35, scale: '大型', coverage: '95%' } },
    { name: '电机电控', itemStyle: { color: '#2ca02c' }, detail: { enterprises: 26, scale: '中大型', coverage: '88%' } },
    { name: '智能驾驶系统', itemStyle: { color: '#2ca02c' }, detail: { enterprises: 22, scale: '中型', coverage: '80%' } },
    { name: '车联网模块', itemStyle: { color: '#2ca02c' }, detail: { enterprises: 19, scale: '中小型', coverage: '75%' } },

    // 下游节点
    { name: '整车制造', itemStyle: { color: '#ff7f0e' }, detail: { enterprises: 18, scale: '大型', coverage: '100%' } },
    { name: '充换电设施', itemStyle: { color: '#ff7f0e' }, detail: { enterprises: 32, scale: '中大型', coverage: '90%' } },
    { name: '后市场服务', itemStyle: { color: '#ff7f0e' }, detail: { enterprises: 45, scale: '中小型', coverage: '82%' } },
    { name: '出行服务', itemStyle: { color: '#ff7f0e' }, detail: { enterprises: 16, scale: '小型', coverage: '65%' } }
  ],
  links: [
    // 上游到中游
    { source: '锂矿资源', target: '动力电池', value: 30 },
    { source: '正负极材料', target: '动力电池', value: 45 },
    { source: '电解液', target: '动力电池', value: 25 },
    { source: '隔膜', target: '动力电池', value: 20 },

    { source: '动力电池', target: '电机电控', value: 40 },
    { source: '电机电控', target: '智能驾驶系统', value: 35 },
    { source: '车联网模块', target: '智能驾驶系统', value: 25 },

    // 中游到下游
    { source: '动力电池', target: '整车制造', value: 50 },
    { source: '电机电控', target: '整车制造', value: 45 },
    { source: '智能驾驶系统', target: '整车制造', value: 40 },
    { source: '车联网模块', target: '整车制造', value: 30 },

    { source: '整车制造', target: '充换电设施', value: 35 },
    { source: '整车制造', target: '后市场服务', value: 30 },
    { source: '充换电设施', target: '出行服务', value: 20 }
  ]
}

// 上下游关联信息
const nodeDetails = {
  '锂矿资源': {
    upstream: '锂矿资源',
    downstream: '动力电池材料、正负极材料、电解液'
  },
  '正负极材料': {
    upstream: '锂矿资源、正负极材料',
    downstream: '动力电池模组、整车制造、电池回收'
  },
  '电解液': {
    upstream: '碳酸酯类溶剂、六氟磷酸锂',
    downstream: '动力电池、储能电池'
  },
  '隔膜': {
    upstream: '聚乙烯、聚丙烯',
    downstream: '动力电池、储能电池'
  },
  '动力电池': {
    upstream: '正负极材料、电解液、隔膜',
    downstream: '电机电控、整车制造'
  },
  '电机电控': {
    upstream: 'IGBT模块、永磁材料',
    downstream: '整车制造、电驱动总成'
  },
  '智能驾驶系统': {
    upstream: '智能算法、车载计算平台、传感器融合',
    downstream: '整车制造、自动驾驶测试场、软件OTA服务'
  },
  '车联网模块': {
    upstream: '卫星导航芯片、地理信息系统',
    downstream: '车联网平台服务、智能交通系统'
  },
  '整车制造': {
    upstream: '动力电池、电机电控、智能驾驶系统',
    downstream: '车联网平台服务、充换电基础设施、后市场服务'
  },
  '充换电设施': {
    upstream: '充电桩制造、储能系统、配电设备',
    downstream: '新能源汽车运营、能源管理平台'
  },
  '后市场服务': {
    upstream: '金融服务机构、维修配件供应链、数据平台',
    downstream: '用户终端、二手车交易平台'
  },
  '出行服务': {
    upstream: '整车制造、新能源汽车运营',
    downstream: '共享出行平台、智能调度系统'
  }
}

const getUpstreamLinks = (nodeName: string) => {
  return nodeDetails[nodeName as keyof typeof nodeDetails]?.upstream || '暂无信息'
}

const getDownstreamLinks = (nodeName: string) => {
  return nodeDetails[nodeName as keyof typeof nodeDetails]?.downstream || '暂无信息'
}

// 产业链完整度数据
const completenessData = [
  { dimension: '企业覆盖度', content: '已覆盖关键环节数量 / 应覆盖环节总数', value: '35 / 38' },
  { dimension: '技术能力匹配度', content: '自主研发技术环节占比', value: '86.7%' },
  { dimension: '区域配套率', content: '本地化供应链配套率', value: '78.3%' },
  { dimension: '政策支持力度', content: '年度财政支持资金总额（亿元）', value: '12.4' }
]

const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)

  const option = {
    title: {
      text: '智能网联新能源汽车产业图谱',
      subtext: '基于重庆市近一年数据',
      left: 'center',
      textStyle: {
        fontSize: 20,
        color: '#2c3e50',
        fontWeight: 'bold'
      },
      subtextStyle: {
        color: '#7f8c8d',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: (params: any) => {
        if (params.dataType === 'node') {
          const node = params.data
          return `
            <strong>${node.name}</strong><br/>
            企业数量: ${node.detail.enterprises}家<br/>
            企业规模: ${node.detail.scale}<br/>
            节点覆盖度: ${node.detail.coverage}
          `
        } else if (params.dataType === 'edge') {
          return `${params.data.source} → ${params.data.target}: ${params.data.value} 家`
        }
        return ''
      }
    },
    series: [
      {
        type: 'sankey',
        layout: 'none',
        emphasis: {
          focus: 'adjacency'
        },
        nodeAlign: 'justify',
        draggable: true,
        nodeGap: 35,
        label: {
          show: true,
          position: 'right',
          fontSize: 12,
          color: 'rgba(0,0,0,0.7)'
        },
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: '#1f77b4'
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6
            }
          },
          {
            depth: 1,
            itemStyle: {
              color: '#2ca02c'
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6
            }
          },
          {
            depth: 2,
            itemStyle: {
              color: '#ff7f0e'
            },
            lineStyle: {
              color: 'source',
              opacity: 0.6
            }
          }
        ],
        data: industryData.nodes,
        links: industryData.links,
        left: '10%',
        right: '10%',
        top: '20%',
        bottom: '15%',
        width: '80%',
        height: '65%'
      }
    ]
  }

  chartInstance.setOption(option)

  // 添加点击事件监听
  chartInstance.on('click', (params: any) => {
    if (params.dataType === 'node') {
      // 设置选中节点
      selectedNode.value = params.data
    }
  })
}

// 默认选中整车制造节点
const setDefaultSelectedNode = () => {
  if (industryData.nodes.length > 0) {
    selectedNode.value = industryData.nodes[8]
  }
}

onMounted(() => {
  initChart()
  setDefaultSelectedNode()

  // 添加窗口大小改变时的重绘
  window.addEventListener('resize', () => {
    if (chartInstance) {
      chartInstance.resize()
    }
  })
})

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style lang="less" scoped>
.industryGraph {
  width: 100%;
  height: 100%;
  padding: 20px;

  .content-container {
    display: flex;
    width: 100%;
    height: 100%;

    .industryGraphCharts {
      width: 80%;
      height: 100%;
      border: 1px solid #edf2f7;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .sidebar {
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding-left: 15px;
      overflow: auto;

      .detail-card, .completeness-card {
        background-color: #ffffff;
        border: 1px solid #edf2f7;
        padding: 10px 15px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

        h3 {
          margin-top: 0;
          color: #333;
          border-bottom: 1px solid #edf2f7;
          padding-bottom: 3px;
          font-size: 16px;
        }
      }

      .detail-card {
        .detail-item {
          margin-bottom: 10px;

          .label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            color: #555;
          }

          .value {
            color: #333;
          }
        }

        .related-links {
          .upstream, .downstream {
            margin-top: 10px;

            h4 {
              margin: 10px 0 5px;
              color: #555;
              font-size: 14px;
            }

            p {
              margin: 0;
              font-size: 13px;
              color: #666;
              line-height: 1.4;
            }
          }
        }
      }

      // 产业链完备度样式
      .completeness-card {
        .completeness-item {
          margin-bottom: 8px;
          padding: 8px;
          background-color: #f8f9fa;
          border-radius: 4px;

          .completeness-label {
            font-weight: bold;
            color: #333;
            font-size: 13px;
          }

          .completeness-content {
            font-size: 12px;
            color: #666;
            margin: 4px 0;
          }

          .completeness-value {
            font-size: 14px;
            color: #ff7f0e;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>